<template>
  <div>
    <TopFilter
      :list="topFilterList"
      :cols="4"
      :labelWidth="90"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="jzyBrand"
      :columns="columns"
      :isSelectColumn="false"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onColumnsChange="columns => this.columns = columns"
    >
    </FilterTable>
    <Drawer
      :visible.sync="visible"
      :title="dialogTitle"
      :full.sync="full"
      destroyOnClose
      :width="980"
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <DownfeedbackModal :type="handleType" :rowData="formData" @close="closeHandler" />

    </Drawer>
    <BaseDialog
      :visible.sync="visibleR"
      :title="dialogTitle"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <DownfeedbackRecordModal :type="handleType" :rowData="formData" @close="closeHandlerR"/>
    </BaseDialog>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { formatdate } from '@/utils/index';
import { getDowns,saveActive } from '@/api/customerCare/saleVisit/downfeedback';
import { getUserInfoByRole, getUserInfo } from '@/api/customerCare/saleVisit/careTaskSearch';
import { queryClueSourceList } from '@/api/potenCus/customer/approval';
import DownfeedbackModal from './downfeedbackModal';
import DownfeedbackRecordModal from './downfeedbackRecordModal';

export default {
  name: 'Downfeedback',
  mixins: [dictionary],
  components: {
    DownfeedbackModal,
    DownfeedbackRecordModal
  },
  data() {
    this.conf = { add: '新增', edit: '编辑', show: '显示' };
    return {
      topFilterList: this.createTopFilterList(),
      fetchParams: {"visitResult":[15921001,15921002]},
      empList:[],
      visible: false,
      visibleR: false,
      visibleA: false,
      full: true,
      dialogTitle: '',
      fetchApi: getDowns,
      columns: this.createTableColumns(),
      handleType: '',
      formData: {}
    };
  },
  created() {
    this.createdEmpList();
    this.getClueTree();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '客户编号',
          fieldName: 'potentialCustomerNo',
          placeholder: ''
        },
        {
          type: 'SELECT',
          label: '客户类型',
          fieldName: 'customerType',
          placeholder: '请选择...',
          itemList: this.createDictList('1523')
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'customerName',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '手机号码',
          fieldName: 'mobilePhone',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '联系人',
          fieldName: 'contactName',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '联系人手机',
          fieldName: 'contactorPhone',
          placeholder: ''
        },
        {
          type: 'SELECT',
          label: '关爱人员',
          fieldName: 'careEmp',
          placeholder: '请选择...',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '销售顾问',
          fieldName: 'consultant',
          placeholder: '请选择...',
          itemList: []
        },
        {
          type: 'INPUT_TREE',
          label: '潜客来源',
          fieldName: 'clueSourceId',
          placeholder: '请选择...',
          itemList: []
        },
        {
          type: 'RANGE_DATE',
          label: '战败时间',
          fieldName: 'reviewDateStart|reviewDateEnd',
          placeholder: '请选择...'
        },
        {
          type: 'SELECT',
          label: '战败原因',
          fieldName: 'resultReason',
          placeholder: '请选择...',
          itemList: this.createDictList('7021')
        },
        {
          type: 'MULTIPLE_SELECT',
          label: '回访结果',
          fieldName: 'visitResult',
          placeholder: '请选择...',
          itemList: this.createDictList('1592'),
          initialValue: [15921001,15921002]
        },
        {
          type: 'SELECT',
          label: '是否激活',
          fieldName: 'activationStatus',
          placeholder: '请选择...',
          itemList: this.createDictList('1004')
        }
      ]
    },
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 160,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" disabled={props.row.visitResult == 15921003||props.row.visitResult == 15921004} type="text" onClick={() => this.editHandle(props.row)}>
                  回访
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.showHandle(props.row)}>
                  明细
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" disabled={props.row.activationStatus == 10041001} type="text" onClick={() => this.activeHandle(props.row)}>
                  激活
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '战败日期',
          dataIndex: 'reviewDate',
          render: props => {
            if(props.row.reviewDate&&props.row.reviewDate!=''){
              return <div>{formatdate(new Date(parseInt(props.row.reviewDate)), 1)}</div>;
            }
          }
        },
        {
          title: '战败原因',
          dataIndex: 'resultReason'
        },
        {
          title: '经过情形',
          dataIndex: 'scene'
        },
        {
          title: '关爱人员',
          dataIndex: 'careEmp'
        },
        {
          title: '回访结果',
          dataIndex: 'visitResult',
          render: props => {
            return <span>{this.createDictText(props.row.visitResult, '1592')}</span>;
          }
        },
        {
          title: '是否激活',
          dataIndex: 'activationStatus',
          render: props => {
            return <span>{this.createDictText(props.row.activationStatus, '1004')}</span>;
          }
        },
        {
          title: '失败原因',
          dataIndex: 'careFailureReason',
          render: props => {
            return <span>{this.createDictText(props.row.careFailureReason, '1594')}</span>;
          }
        },
        {
          title: '最晚回访日期',
          dataIndex: 'latestVisitDate',
          render: props => {
            if(props.row.latestVisitDate&&props.row.latestVisitDate!=''){
              return <div>{formatdate(new Date(parseInt(props.row.latestVisitDate)), 1)}</div>;
            }
          }
        },
        {
          title: '实际回访日期',
          dataIndex: 'visitDate',
          render: props => {
            if(props.row.visitDate&&props.row.visitDate!=''){
              return <div>{formatdate(new Date(parseInt(props.row.visitDate)), 1)}</div>;
            }
          }
        },
        {
          title: '回访内容',
          dataIndex: 'visitContent'
        },
        {
          title: '客户编号',
          dataIndex: 'potentialCustomerNo',
          width:125
        },
        {
          title: '客户类型',
          dataIndex: 'customerType',
          render: props => {
            return <span>{this.createDictText(props.row.customerType, '1523')}</span>;
          }
        },
        {
          title: '客户名称',
          dataIndex: 'customerName'
        },
        {
          title: '手机号码',
          dataIndex: 'mobilePhone'
        },
        {
          title: '联系人',
          dataIndex: 'contactName'
        },
        {
          title: '联系人手机',
          dataIndex: 'contactorPhone'
        },
        {
          title: '潜客来源',
          dataIndex: 'clueSourceName'
        },
        {
          title: '意向品牌',
          dataIndex: 'intentBrandName'
        },
        {
          title: '意向车系',
          dataIndex: 'intentSeriesName'
        },
        {
          title: '意向车型',
          dataIndex: 'intentModelName'
        },
        {
          title: '销售顾问',
          dataIndex: 'consultant'
        }
      ];
    },
    createdEmpList(){
      //初始化关爱人员选择列表
      getUserInfo().then(res => {
        if(res.resultCode == 200){
          let param = {
            companyId:res.data.userInfo.companyId,
            positionCode:10061015
          };
          getUserInfoByRole(param).then(res => {
            if(res.resultCode == 200){
              this.topFilterList.find(item=>item.fieldName==='consultant').itemList = res.data.map(x => ({ value: x.userId, text: x.employeeName }));
              this.topFilterList.find(item=>item.fieldName==='careEmp').itemList = res.data.map(x => ({ value: x.userId, text: x.employeeName }));
            }else{
              this.$message.error('获取关爱人员列表失败!');
            }
          })
        }else{
          this.$message.error('获取当前登录用户信息失败!');
        }
      })
    },
    async getClueTree() {
      const res = await queryClueSourceList();
      if (res.resultCode === 200) {
        let treeList = res.data
        treeList.forEach(el => {
          el.text = el.clueName;
          el.value = el.id;
          el.parentId = el.parentId;
        });

        this.topFilterList.find(item => item.fieldName ==='clueSourceId').itemList = treeList
      }
    },
    editHandle(row) {
      this.handleType = 'edit';
      this.formData = row;
      this.showHandler();
    },
    showHandle(row){
      this.handleType = 'show';
      this.formData = row;
      this.showHandler();
    },
    recordHandle(row) {
      this.handleType = 'record';
      this.formData = row;
      this.showHandlerR();
    },
    activeHandle(row) {
      this.$confirm('是否确认激活?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        saveActive(row.customerBusinessId,row.customerVisitTaskId).then(res=>{
          if (res.resultCode == 200) {
            this.$message.success('激活成功');
            this.fetchParams = { ...this.fetchParams };
          }else{
            this.$message.error(res.data.errMsg);
          }
        })
      }).catch(() => {});
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    showHandler() {
      this.dialogTitle = `回访`;
      this.visible = true;
      this.full = true;
    },
    showHandlerR() {
      this.dialogTitle = `回访记录`;
      this.visibleR = true;
    },
    closeHandler(val, type) {
      this.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    closeHandlerR(val, type){
      this.visibleR = val;
    }
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  }
};
</script>

<style lang="less" scoped>
</style>
